<template>
	<view class="info-box">
		<view class="input-item">
			<view class="title-box">
				<view class="important">
					*
				</view>
				<view class="title">
					项目名称
				</view>
			</view>
			<view class="input-box">
				<input class="input" v-if="classifyDisalogType == false" :value="apiinfo.projectName" @input="titleChange" type="text" placeholder="请输入项目名称"  />
				<view class="input"  v-if="classifyDisalogType == true">
					{{apiinfo.projectName == '' ? '请输入项目名称' : apiinfo.projectName}}
				</view>
			</view>
		</view>
		<view class="input-item">
			<view class="title-box">
				<view class="title">
					项目内容
				</view>
			</view>
			<view class="input-box">
				<textarea class="textarea" @input="detailChange" :value="apiinfo.projectDetails" placeholder="请输入内容" v-if="classifyDisalogType == false" />
				<view class="textarea" v-if="classifyDisalogType == true">
					{{apiinfo.projectDetails == '' ? '请输入内容' : apiinfo.projectDetails}}
				</view>
				<view class="upload-cell-box" @click="uploadImage">
					<image class="icon" src="/static/image/img_icon.png" mode="aspectFit"></image>
					<view class="title">
						图片
					</view>
					<view class="value-box">
						<view class="value" v-if="uploadList.length > 0">
							已选中{{uploadList.length}}张
						</view>
						<image class="right-icon" src="/static/image/more_right_icon.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			
		</view>
		<view class="cell-box">
			<cell title="负责人" type="personal" borderBottom important @tap="gopersonal('leader')" :radiovalue="assignment"></cell>
			<cell title="添加参与人" type="personal" borderBottom important @tap="gopersonal('participants')" :List="participants"></cell>
			<picker mode="date" :value="apiinfo.startTime" :start="startDate" @change="bindDateChange">
			<cell title="要求开始时间" :value="apiinfo.startTime"  borderBottom important></cell>
			</picker>
			<picker mode="date" :value="apiinfo.endTime" :start="startDate" @change="bindDateChange">
			<cell title="要求完成时间" :value="apiinfo.endTime"  important></cell>
			</picker>
		</view>
		<view class="cell-box">
			<cell title="项目分类" borderBottom important @tap="openclassify" :value="apiinfo.type"></cell>
			<cell title="标签" type="input" placeholder="请输入" important :value="apiinfo.label" :disabled="classifyDisalogType" name="label" @input="inputChange"></cell>
		</view>
		<view class="cell-box">
			<cell title="预算" type="input" name="budget"  @input="inputChange" placeholder="请输入" borderBottom :value="apiinfo.budget" :disabled="classifyDisalogType"></cell>
			<cell title="差旅费" type="input" name="travelExpenses" @input="inputChange" placeholder="请输入" borderBottom :value="apiinfo.travelExpenses" :disabled="classifyDisalogType"></cell>
			<cell title="物料费" type="input" name="materialExpenses" @input="inputChange" placeholder="请输入" borderBottom :value="apiinfo.materialExpenses" :disabled="classifyDisalogType"></cell>
			<cell title="其他费用" type="input" name="otherExpenses" @input="inputChange" placeholder="请输入" borderBottom :value="apiinfo.otherExpenses" :disabled="classifyDisalogType"></cell>
		</view>
		<classify v-if="classifyDisalogType == true" :selected="classifyselected" @confirm="classifyChange" :value="apiinfo.type"
			@cancel="classifyCancel"></classify>
		<view class="button" @click="confirm">
			保存
		</view>
	</view>
</template>

<script>
	import {parseDate,uploadImage} from '@/utils/utils.js';
	import classify from '@/pages/initiate/component/classify/classify.vue'
	import * as api from '@/utils/api.js';
	import cell from '../cell/cell.vue';
	export default {
		components:{
			cell,classify
		},
		props:{
			info:{
				type:Object,
				default:{}
			},
			leader:{
				type:Array,
				default:[],
			},
			assignment:{
				type:Object,
				default:{},
			},
			participants:{
				type:Array,
				default:[],
			},
		},
		data() {
			return {
				apiinfo:{
					endTime:'',
					id:'',
					label:'',
					leaders:[],
					projectName:'',
					startTime:'',
					taskId:'',
					type:'',
					budget:'',
					files:[],
					materialExpenses:'',
					otherExpenses:'',
					participant:[],
					projectDetails:'',
					travelExpenses:''
				}, 
				uploadList:[], // 图片临时上传列表
				classifyDisalogType:false, // 分类悬浮窗显示状态
				startDate: null, // 开始时间
				item:{},
			}
		},
		mounted() {
			let data = parseDate();
			let apiinfo = this.apiinfo;
			let info = this.info;
			apiinfo.projectName = info.projectName;
			apiinfo.projectDetails = info.projectDetails;
			apiinfo.materialExpenses = info.materialExpenses;
			apiinfo.otherExpenses = info.otherExpenses;
			apiinfo.travelExpenses = info.travelExpenses;
			apiinfo.id = info.id;
			apiinfo.taskId = info.taskId;
			apiinfo.label = info.label;
			apiinfo.type = info.type;
			apiinfo.budget = info.budget;
			apiinfo.startTime = info.startTime.substring(0,info.startTime.length - 9);
			apiinfo.endTime = info.endTime.substring(0,info.startTime.length - 9);
			this.startDate = data.year + '-' + data.month + '-' + data.day;
			this.item = info;
		},
		methods: {
			titleChange:function(e){
				this.apiinfo.projectName = e.target.value;
			},
			detailChange:function(e){
				this.apiinfo.projectDetails = e.target.value;
			},
			inputChange:function(e){
				console.log(e);
				if(e.name=='label'){
					this.apiinfo.label = e.value;
				}else if(e.name == 'budget'){
					this.apiinfo.budget = e.value;
				}else if(e.name == 'travelExpenses'){
					this.apiinfo.travelExpenses = e.value;
				}else if(e.name == 'materialExpenses'){
					this.apiinfo.materialExpenses = e.value;
				}else if(e.name == 'otherExpenses'){
					this.apiinfo.otherExpenses = e.value;
				}
			},
			openclassify:function(){
				this.classifyDisalogType = true;
			},
			classifyCancel:function(){
				this.classifyDisalogType = false;
			},
			classifyChange:function(e){
				this.apiinfo.type = e.result.name;
			},
			gopersonal:function(identity){
				let params = '?identity=';
				if(identity == 'leader'){
					params = params + identity + '&type=project&selectedType=radio&taskid='+ this.info.taskId;
				}else{
					params = params + identity + '&selectedType=checkbox&taskid='+ this.info.taskId;
				}
				uni.navigateTo({
					url: '/pages/initiate/personnel/personnel' + params
				});
			},
			/**
			 * 上传图片/附件触发事件
			 */
			uploadImage: function() {
				let that = this;
				let count = 9;
					uni.chooseImage({
						count:count, 
						sizeType: ['original', 'compressed'],
						sourceType: ['album'],
						success: function(res) {
							that.uploadList = res.tempFilePaths;
						}
					});
			},
			/**
			 * 保存按钮触发事件
			 */
			async confirm(){
				let that = this;
				let apiinfo = JSON.parse(JSON.stringify(this.apiinfo));
				let leader = this.assignment;
				let participants = this.participants;
				apiinfo.leaders = [];
				apiinfo.participant = [];
				apiinfo.leaders.push(leader.id);
				participants.forEach(res=>{
					apiinfo.participant.push(res.id);
				})
				apiinfo.startTime = apiinfo.startTime + ' 00:00:00';
				apiinfo.endTime = apiinfo.endTime + ' 23:59:59';
				if(apiinfo.projectName == ''){
					uni.showToast({
						title: '项目名称不能为空',
						icon:'none',
						duration: 2000
					});
					return;
				}else if(apiinfo.leaders.length == 0){
					uni.showToast({
						title: '负责人不能为空',
						icon:'none',
						duration: 2000
					});
					return;
				}else if(apiinfo.startTime == ''){
					uni.showToast({
						title: '开始时间不能为空',
						icon:'none',
						duration: 2000
					});
					return;
				}else if(apiinfo.endTime == ''){
					uni.showToast({
						title: '完成时间不能为空',
						icon:'none',
						duration: 2000
					});
					return;
				}else if(apiinfo.type == ''){
					uni.showToast({
						title: '项目分类不能为空',
						icon:'none',
						duration: 2000
					});
					return;
				}else if(apiinfo.label == ''){
					uni.showToast({
						title: '标签不能为空',
						icon:'none',
						duration: 2000
					});
					return;
				}
				let uploadList = this.uploadList;
				if(uploadList.length > 0){
					for(let res of uploadList){
						let result = await uploadImage(res);
						result = JSON.parse(result);
						apiinfo.files.push({fileName:result.data.name,fileUrl:result.data.url});
					}
				}
				console.log('confirm',apiinfo);
				api.updateProjectDetail(apiinfo).then(res=>{
					uni.showToast({
						title: '保存成功',
						duration: 2000,
						complete(){
							getApp().globalData.personList = {leader:[],participants:[],assignment:[]};
							setTimeout(function(){
								that.$emit('refresh');
							},2000)
							
						},
						});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.info-box{
		padding: 0 20rpx;
		.input-item{
			margin-top: 20rpx;
			.title-box{
				display: flex;
				.important{
					color: red;
				}
				.title{
					font-size: 28rpx;
				}
			}
			.input-box{
				border:1px solid #e2e5e8;
				border-radius: 10rpx;
				margin-top: 20rpx;
				background-color: white;
				.input{
					padding:0 20rpx;
					width: 100%;
					height:70rpx;
					font-size: 28rpx; 
					line-height: 70rpx;
				}
				.textarea{
					width: 100%;
					height:250rpx;
					padding:20rpx;
				}
				.upload-cell-box{
					display: flex;
					padding:0 20rpx;
					border-top:1px solid #e2e5e8;
					position: relative;
					.icon{
						width: 40rpx;
						height: 40rpx;
						margin: 20rpx 0;
					}
					.title{
						font-size: 28rpx;
						margin-left: 10rpx;
						line-height: 80rpx;
					}
					.value-box{
						position: absolute;
						right: 20rpx;
						top: 0;
						display: flex;
						.value{
							line-height: 80rpx;
							font-size: 28rpx;
						}
						.right-icon{
							margin: 25rpx 0;
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}
		}
	}
	.cell-box{
		margin:20rpx 0;
		border-radius: 10rpx;
	}
	.button{
		background-color: #409eff;
		width: 100%;
		margin: 20rpx 0;
		text-align: center;
		color: white;
		line-height: 70rpx;
		border-radius: 10rpx;
	}
</style>
